<script setup name="Pdfh5">
import Pdfh5 from 'pdfh5';
let pdfh5 = ref(null);
let loading = ref(false);

// expects props options
const props = defineProps({
	pdfUrl: {
		type: String,
		default: '',
	},
});

loading.value = true;

onMounted(() => {
	if (props.pdfUrl === '') {
		loading.value = false;
		return;
	}
	pdfh5.value = new Pdfh5('#pdf-box', {
		pdfurl: props.pdfUrl,
	});
	pdfh5.value.on('complete', function (status, msg, time) {
		loading.value = false;
	});
});
</script>

<template>
	<div v-loading="loading" class="container">
		<div id="pdf-box"></div>
	</div>
</template>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	:deep(.pageNum) {
		display: none !important;
	}
	#pdf-box {
		flex: 1;
		width: 100%;
	}
}
</style>
